/**
 * @Author:marina
 * @Date: 2025-02-20 15:02:53 
 * @Description:卡片切换（数据写死了，没改成通用组件）
 */

<template>
    <div class="switch-pic">
        <div class="cards">
            <input
                type="radio"
                id="radio-1"
                name="radio-card"
                checked
            >
            <article
                class="card"
                style="--angle:4deg"
            >
                <img
                    class="card-img"
                    src="https://repo.bfw.wiki/random/200x300/景色?rand=1"
                >
                <div class="card-data">
                    <span class="card-num">1/7</span>
                    <h2>Alejandro Escamilla</h2>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus maiores accusantium cumque atque?
                        Ex
                        voluptatem quisquam temporibus. Provident rerum quae nemo eligendi fugiat!</p>
                    <footer>
                        <label
                            for="radio-7"
                            aria-label="Previous"
                        >&#10094;</label>
                        <label
                            for="radio-2"
                            aria-label="Next"
                        >&#10095;</label>
                    </footer>
                </div>
            </article>

            <!-- card 2 -->
            <input
                type="radio"
                id="radio-2"
                name="radio-card"
            >
            <article
                class="card"
                style="--angle:-8deg"
            >
                <img
                    class="card-img"
                    src="https://repo.bfw.wiki/random/200x300/景色?rand=12"
                >
                <div class="card-data">
                    <span class="card-num">2/7</span>
                    <h2>Shyamanta Baruah</h2>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus maiores accusantium cumque atque?
                        Ex
                        voluptatem quisquam temporibus. Provident rerum quae nemo eligendi fugiat!</p>
                    <footer>
                        <label
                            for="radio-1"
                            aria-label="Previous"
                        >&#10094;</label>
                        <label
                            for="radio-3"
                            aria-label="Next"
                        >&#10095;</label>
                    </footer>
                </div>
            </article>

            <!-- card 3 -->
            <input
                type="radio"
                id="radio-3"
                name="radio-card"
            >
            <article
                class="card"
                style="--angle:-7deg"
            >
                <img
                    class="card-img"
                    src="https://repo.bfw.wiki/random/200x300/景色?rand=144"
                >
                <div class="card-data">
                    <span class="card-num">3/7</span>
                    <h2>Luke Chesser</h2>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus maiores accusantium cumque atque?
                        Ex
                        voluptatem quisquam temporibus. Provident rerum quae nemo eligendi fugiat!</p>
                    <footer>
                        <label
                            for="radio-2"
                            aria-label="Previous"
                        >&#10094;</label>
                        <label
                            for="radio-4"
                            aria-label="Next"
                        >&#10095;</label>
                    </footer>
                </div>
            </article>

            <!-- card 4 -->
            <input
                type="radio"
                id="radio-4"
                name="radio-card"
            >
            <article
                class="card"
                style="--angle:11deg"
            >
                <img
                    class="card-img"
                    src="https://repo.bfw.wiki/random/200x300/景色?rand=1323"
                >
                <div class="card-data">
                    <span class="card-num">4/7</span>
                    <h2>Ilham Rahmansyah</h2>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus maiores accusantium cumque atque?
                        Ex
                        voluptatem quisquam temporibus. Provident rerum quae nemo eligendi fugiat!</p>
                    <footer>
                        <label
                            for="radio-3"
                            aria-label="Previous"
                        >&#10094;</label>
                        <label
                            for="radio-5"
                            aria-label="Next"
                        >&#10095;</label>
                    </footer>
                </div>
            </article>

            <!-- card 5 -->
            <input
                type="radio"
                id="radio-5"
                name="radio-card"
            >
            <article
                class="card"
                style="--angle:13deg"
            >
                <img
                    class="card-img"
                    src="https://repo.bfw.wiki/random/200x300/景色?rand=133323"
                >
                <div class="card-data">
                    <span class="card-num">5/7</span>
                    <h2>petradr</h2>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus maiores accusantium cumque atque?
                        Ex
                        voluptatem quisquam temporibus. Provident rerum quae nemo eligendi fugiat!</p>
                    <footer>
                        <label
                            for="radio-4"
                            aria-label="Previous"
                        >&#10094;</label>
                        <label
                            for="radio-6"
                            aria-label="Next"
                        >&#10095;</label>
                    </footer>
                </div>
            </article>

            <!-- card 6 -->
            <input
                type="radio"
                id="radio-6"
                name="radio-card"
            >
            <article
                class="card"
                style="--angle:-17deg"
            >
                <img
                    class="card-img"
                    src="https://repo.bfw.wiki/random/200x300/景色?rand=136666"
                >
                <div class="card-data">
                    <span class="card-num">6/7</span>
                    <h2>Caleb George</h2>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus maiores accusantium cumque atque?
                        Ex
                        voluptatem quisquam temporibus. Provident rerum quae nemo eligendi fugiat!</p>
                    <footer>
                        <label
                            for="radio-5"
                            aria-label="Previous"
                        >&#10094;</label>
                        <label
                            for="radio-7"
                            aria-label="Next"
                        >&#10095;</label>
                    </footer>
                </div>
            </article>

            <!-- card 7 -->
            <input
                type="radio"
                id="radio-7"
                name="radio-card"
            >
            <article
                class="card"
                style="--angle:20deg"
            >
                <img
                    class="card-img"
                    src="https://repo.bfw.wiki/random/200x300/景色?rand=12124324"
                >
                <div class="card-data">
                    <span class="card-num">7/7</span>
                    <h2>Austin Ban</h2>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus maiores accusantium cumque
                            atque? Ex
                            voluptatem quisquam temporibus. Provident rerum quae nemo eligendi fugiat!</p>
                        <footer>
                            <label
                                for="radio-6"
                                aria-label="Previous"
                            >&#10094;</label>
                            <label
                                for="radio-1"
                                aria-label="Next"
                            >&#10095;</label>
                        </footer>
                </div>
            </article>
        </div>

    </div>
</template>

<script setup lang="ts">

</script>

<style lang="less" scoped>
.switch-pic {
    margin: 0;
    background: white;
    min-height: 100svh;
    display: grid;
    place-content: center;
    margin: 0;
    padding: 1rem;
    font: 1rem system-ui;

    @property --angle {
        syntax: "<angle>";
        initial-value: 0deg;
        inherits: true;
    }

    /* Hide radio buttons */
    input[type="radio"] {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border-width: 0;
    }

    .cards {
        --img-w: 200px;
        --duration: 300ms;
        --img-easing: cubic-bezier(0.34, 1.56, 0.64, 1);
        width: min(100% - 4rem, 800px);
        margin-inline: auto;
        display: grid;
    }

    .card {
        --cards-grid-cols: auto;
        --cards-grid-rows: var(--img-w) auto;
        --cards-grid-gap: 2rem;
        --cards-footer-justify: center;

        grid-area: 1/1;
        display: grid;
        place-items: center;
        grid-template-columns: var(--cards-grid-cols);
        grid-template-rows: var(--cards-grid-rows);
        gap: var(--cards-grid-gap);

    }

    @media (600px < width) {
        .card {
            --cards-grid-cols: var(--img-w) auto;
            --cards-grid-rows: auto;
            --cards-grid-gap: 4rem;
            --cards-footer-justify: start;
        }
    }

    /* stacking order - these are updated according to which card is selected */
    .card:nth-of-type(1) {
        z-index: var(--card-1-z, 1);
    }

    .card:nth-of-type(2) {
        z-index: var(--card-2-z, 2);
    }

    .card:nth-of-type(3) {
        z-index: var(--card-3-z, 3);
    }

    .card:nth-of-type(4) {
        z-index: var(--card-4-z, 4);
    }

    .card:nth-of-type(5) {
        z-index: var(--card-5-z, 5);
    }

    .card:nth-of-type(6) {
        z-index: var(--card-6-z, 6);
    }

    .card:nth-of-type(7) {
        z-index: var(--card-7-z, 7);
    }


    .card-img {
        width: 200px;
        height: 200px;
        aspect-ratio: 1 / 1;
        rotate: var(--angle, 0deg);
        border-radius: 10px;
        border: 3px solid #FFF;
        overflow: hidden;
        transform-origin: center;
        object-fit: cover;
        box-shadow: 0 0 5px 3px rgba(0 0 0 / .05);
    }

    input:nth-of-type(1):checked+.card~.card>.card-img {
        animation: straighten-img-1 calc(var(--duration) * 2) forwards;
        animation-timing-function: var(--img-easing);
    }

    .card:has(~input:nth-of-type(2):checked)>.card-img,
    input:nth-of-type(2):checked+.card~.card>.card-img {
        animation: straighten-img-2 calc(var(--duration) * 2) forwards;
        animation-timing-function: var(--img-easing);
    }

    .card:has(~input:nth-of-type(3):checked)>.card-img,
    input:nth-of-type(3):checked+.card~.card>.card-img {
        animation: straighten-img-3 calc(var(--duration) * 2) forwards;
        animation-timing-function: var(--img-easing);
    }

    .card:has(~input:nth-of-type(4):checked)>.card-img,
    input:nth-of-type(4):checked+.card~.card>.card-img {
        animation: straighten-img-4 calc(var(--duration) * 2) forwards;
        animation-timing-function: var(--img-easing);
    }

    .card:has(~input:nth-of-type(5):checked)>.card-img,
    input:nth-of-type(5):checked+.card~.card>.card-img {
        animation: straighten-img-5 calc(var(--duration) * 2) forwards;
        animation-timing-function: var(--img-easing);
    }

    .card:has(~input:nth-of-type(6):checked)>.card-img,
    input:nth-of-type(6):checked+.card~.card>.card-img {
        animation: straighten-img-6 calc(var(--duration) * 2) forwards;
        animation-timing-function: var(--img-easing);
    }

    .card:has(~input:nth-of-type(7):checked)>.card-img,
    input:nth-of-type(7):checked+.card~.card>.card-img {
        animation: straighten-img-7 calc(var(--duration) * 2) forwards;
        animation-timing-function: var(--img-easing);
    }

    /* as CSS can't remove animations, we change the animation according to which checkbox is checked  - all animations are the same (would be simpler with SCSS) */
    @keyframes straighten-img-1 {
        50% {
            --angle: 0deg;
        }
    }

    @keyframes straighten-img-2 {
        50% {
            --angle: 0deg;
        }
    }

    @keyframes straighten-img-3 {
        50% {
            --angle: 0deg;
        }
    }

    @keyframes straighten-img-4 {
        50% {
            --angle: 0deg;
        }
    }

    @keyframes straighten-img-5 {
        50% {
            --angle: 0deg;
        }
    }

    @keyframes straighten-img-6 {
        50% {
            --angle: 0deg;
        }
    }

    @keyframes straighten-img-7 {
        50% {
            --angle: 0deg;
        }
    }


    /* ordering according to current checked card */
    .cards:has(input:nth-of-type(1):checked) {
        --card-1-z: 7;
        --card-2-z: 6;
        --card-3-z: 5;
        --card-4-z: 4;
        --card-5-z: 3;
        --card-6-z: 2;
        --card-7-z: 1;
    }

    .cards:has(input:nth-of-type(2):checked) {
        --card-1-z: 6;
        --card-2-z: 7;
        --card-3-z: 5;
        --card-4-z: 4;
        --card-5-z: 3;
        --card-6-z: 2;
        --card-7-z: 1;
    }

    .cards:has(input:nth-of-type(3):checked) {
        --card-1-z: 5;
        --card-2-z: 6;
        --card-3-z: 7;
        --card-4-z: 4;
        --card-5-z: 3;
        --card-6-z: 2;
        --card-7-z: 1;
    }

    .cards:has(input:nth-of-type(4):checked) {
        --card-1-z: 4;
        --card-2-z: 5;
        --card-3-z: 6;
        --card-4-z: 6;
        --card-5-z: 3;
        --card-6-z: 2;
        --card-7-z: 1;
    }

    .cards:has(input:nth-of-type(5):checked) {
        --card-1-z: 3;
        --card-2-z: 4;
        --card-3-z: 5;
        --card-4-z: 6;
        --card-5-z: 7;
        --card-6-z: 2;
        --card-7-z: 1;
    }

    .cards:has(input:nth-of-type(6):checked) {
        --card-1-z: 2;
        --card-2-z: 3;
        --card-3-z: 4;
        --card-4-z: 5;
        --card-5-z: 6;
        --card-6-z: 7;
        --card-7-z: 1;
    }

    .cards:has(input:nth-of-type(7):checked) {
        --card-1-z: 1;
        --card-2-z: 2;
        --card-3-z: 3;
        --card-4-z: 4;
        --card-5-z: 5;
        --card-6-z: 6;
        --card-7-z: 7;
    }

    .card-data {
        display: grid;
        gap: 1rem;
    }

    .card-data>.card-num {
        opacity: var(--data-opacity, 0);
        font-size: .8rem;
        color: #666;
    }

    .card-data>p {
        font-size: 0.9rem;
        color: #333;
    }

    .card-data>h2,
    .card-data>p {
        transition: var(--duration) ease-in-out;
        transition-delay: var(--data-delay, 0ms);
        opacity: var(--data-opacity, 0);
        translate: 0 var(--data-y, 20px);
    }

    .card-data>footer {
        display: flex;
        justify-content: var(--cards-footer-justify);
        gap: 2rem;
    }

    .card-data>footer label {
        margin-block-start: auto;
        cursor: pointer;
        pointer-events: var(--card-events, none);
        opacity: var(--data-opacity, 0);
        transition: color var(--duration) ease-in-out;
        background-color: #EEE;
        border-radius: 50%;
        width: 32px;
        height: 32px;
        aspect-ratio: 1/1;
        display: grid;
        place-content: center;
        transition: background-color 300ms ease-in-out;
    }

    input:checked:focus-visible+.card>.card-data>footer label,
    .card-data>footer label:hover {
        background-color: #CCC;
    }

    input:checked:focus-visible+.card>.card-data>footer label,
    .card-data>footer label:hover {
        color: steelblue;
    }

    input:checked+.card {
        --data-opacity: 1;
        --data-y: 0;
        --data-delay: var(--duration);
        --card-events: auto;
        transition: z-index;
        transition-delay: 300ms;
        /*z-index: 1;*/
    }

    input:checked+.card>.card-img {

        animation: reveal-img calc(var(--duration) * 2) forwards;
    }

    @keyframes reveal-img {
        50% {
            translate: -150% 0;
            --angle: 0deg;
        }
    }
}
</style>